<template>
    <div>
      <div class="jubaoFirstCon">
        <div class="top">
 <router-link to="/">
          <van-icon name="arrow-left" class="topIcon" size="3rem" @click="goback()"/>
      </router-link>
         
        <div class="toutiaoTop" @click="goback()">举报动态</div><br/>
          
          </div>
        <div class="title">举报动态</div>
    <div class="jubaoCon">
            <div class="UserImg">
  <van-image
                  round
                  width="4rem"
                  height="4rem"
                  :src="discussAll.user_image_road"
                  class="toutiaoUserImg"
                  fit="cover"
                />
                <div class="toutiaoUserName">{{discussAll.user_name}}</div>
        </div>

        <div class="toutiaoText">
{{ discussAll.discuss_text }}
        </div>
    </div>
  </div>
     <div class="jubaoSecondCon">
        <van-radio-group v-model="radio" >
  <van-radio name="1" class="danxuankuang"></van-radio>
  <van-radio name="2" class="danxuankuang"></van-radio>
  <van-radio name="3" class="danxuankuang"></van-radio>
   <van-radio name="4" class="danxuankuang"></van-radio>
  <van-radio name="5" class="danxuankuang"></van-radio>
   <van-radio name="6" class="danxuankuang"></van-radio>
</van-radio-group>



     <div class="yuanyin">举报原因</div>
        <div class="jubaoFoot" v-for="(item,index) in list" :key="index">
  
    <div class="jubaoType">{{item.report_type_name}}</div><hr/>
        </div>
     <van-button type="primary" size="large" class="bigBtn" @click="sumbmit()">提交</van-button>
     </div>
    </div>
</template>
<script>
import http from '../../api/index';
import util from '../../util/index';
export default {
    data() {
        return {
            discussAll:[],
            list:[],
            radio:'1',
            routeFrom:'',
        }
    },

    methods:{
goback(){
  this.$route.push('/');
},
sumbmit(){
   this.$toast.success('举报成功');
    this.$router.push('/');
 console.log(sessionStorage.getItem('active'))
}
    },
    mounted(){
          http
      .getTouTiao({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
      for(let i=0;i<r.data.length;i++){
if(this.$route.params.id==r.data[i].user_id){
    this.discussAll=r.data[i]
    console.log(this.discussAll)
}
      };
util.getReportTypeAll().then((r)=>{
    console.log('r',r);
    this.list=r.data
})

      });
    }
}
</script>
<style scoped>
.top{
  height: 5rem;
  width: 100%;
  background-color: skyblue;
  position: relative;
}
.topIcon{
  color: white;
  margin-top: 1rem;

}
.toutiaoTop{
  font-size: 2rem;
  line-height: 5rem;
  color: white;
 position: relative;
 top: -0.8rem;
  display: inline-block;
}
.toutiaoTop1{
  font-size: 2rem;
  line-height: 5rem;
  color: white;
 position: relative;
 top: -0.8rem;
  display: inline-block;
}
.title{
    color: gray;
    height: 5rem;
   
    font-size: 1.5rem;
    margin-left: 1rem;
     /* width: 100%; */
}
.jubaoCon{
    background-color: white;
    border-top: gray;
    border-bottom: gray;
    margin-top: -2rem;
}
.toutiaoUserName {
  display: inline-block;
  position: relative;
  top: -1.5rem;
  font-size: 1.5rem;
  margin-left:0.5rem;
  margin-top: -5rem;
}
.UserImg{
     background-color: white;
    border-top: gray;
    border-bottom: gray;
    padding: 0.5rem;
}
.toutiaoText {
  font-size: 1.5rem;
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left:3rem;
 width: 88%;
}
.jubaoFoot{
    background-color: white;
    position: relative;
    top: 8rem;
    width: 100%;
}
.bigBtn{
    position: relative;
    bottom: -12rem;
    width: 90%;
    margin-left:2rem;
}
.yuanyin{
    position: relative;
    top: 7rem;
   margin-left: 1rem;
       color: gray;   
    font-size: 1.5rem;
}
/* 单选框 */
.danxuankuang{
    position: relative;
    top: 34.5rem;
    z-index: 1000;
    margin-bottom:2rem;
    margin-left: 1rem;
}
.jubaoType{
    margin-left:3rem;
    display: inline-block;
    padding: 1rem;
    font-size: 1.5rem;
    /* border-bottom: 0.1rem solid gray; */
    width:85%;
}
.jubaoSecondCon{
  position: relative;
  top: -17rem;
}
</style>